<template>
  <div id="d1">
    <!--搜索框-->
    <el-row>
      <el-col :span=12>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="姓名">
            <el-input v-model="mindTestName" placeholder="姓名"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
        <el-col :span=5>
              <el-button type="primary" @click="search">查询</el-button>
            </el-col>
          <el-col :span=6>
              <el-button type="primary" @click="dialogFormVisible=true">添加心理测评</el-button>
          </el-col>
        </el-row>
        <!--表格-->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column fixed prop="mindTestName" label="姓名" width="80"></el-table-column>
            <el-table-column prop="mindTestDatetime" label="体制测试日期" width="200"></el-table-column>
            <el-table-column prop="mindTestQuti" label="躯体化" width="80"></el-table-column>
            <el-table-column prop="mindTestQiangpozheng" label="强迫症" width="80"></el-table-column>
            <el-table-column prop="mindTestRenji" label="人际关系敏感" width="120"></el-table-column>
            <el-table-column prop="mindTestYouyu" label="犹豫" width="80"></el-table-column>
            <el-table-column prop="mindTestJiaolv" label="焦虑" width="80"></el-table-column>
            <el-table-column prop="mindTestDidui" label="敌对" width="80"></el-table-column>
            <el-table-column prop="mindTestKongbu" label="恐怖" width="80"></el-table-column>
            <el-table-column prop="mindTestPianzhi" label="偏执" width="80"></el-table-column>
            <el-table-column prop="mindTestJingshenbing" label="精神病性" width="80"  ></el-table-column>
            <el-table-column prop="memId" label="会员id" width="80" v-show="false" ></el-table-column>
            <el-table-column  fixed="right" label="操作" width="80">
                <template slot-scope="scope">
                    <el-button  type="text" @click="querycon(scope.row)">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页控件-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20, 30, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
        <!--
            @size-change：页大小发生改变时触发
            @current-change：当前页发生改变时触发
            :current-page： 用于设置当前页
            :page-size：用于设置默认的页大小
            :total：用于设置总记录数
        -->
        <el-dialog title="添加心理测评方案" :visible.sync="dialogFormVisible" width="75%">
          <div>
            <el-col :span=6>
              <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="姓名">
                  <el-input v-model="memName" placeholder="姓名"></el-input>
                </el-form-item>
              </el-form>
              </el-col>
              <el-col :span=7>
              <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="身份证号码">
                  <el-input v-model="memIdentity" placeholder="身份证号码"></el-input>
                </el-form-item>
              </el-form>
              </el-col>
            <el-col :span="2">
              <el-button type="primary" @click="query()" :disabled = 'jy'>查询</el-button>
            </el-col>
            <el-col :span=3>
              <el-form :inline="true" class="demo-form-inline">
                  <el-form-item label="年龄">
                    <el-input v-model="memAge" placeholder="年龄" style="width:60px"></el-input>
                  </el-form-item>
                </el-form>
            </el-col>
            <el-col :span=3>
              <el-form :inline="true" class="demo-form-inline">
                  <el-form-item label="性别">
                    <el-input v-model="memGender" placeholder="性别" style="width:60px"></el-input>
                  </el-form-item>
                </el-form>
            </el-col>
            <el-col :span=3>
              <el-form :inline="true" class="demo-form-inline">
                  <el-form-item label="会员id" v-show="false">
                    <el-input v-model="memId" placeholder="会员id" style="width:60px"></el-input>
                  </el-form-item>
                </el-form>
            </el-col>
          </div>
          <div style="width:80%;display:inline-block;text-align:left">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                  <el-tab-pane v-for="rub in rubTypes" :key="rub.tid" :label="rub.tname" :name="rub.tid" disabled>
                    <div v-for="(rubric,ind) in Rubric" :key="rubric.rubId">
                        <div style="margin:10px">
                          <el-input type="hidden"></el-input>
                          <span>{{ind+1+'. '+rubric.rubName}}</span>
                        </div>
                      <el-radio-group v-model="test[ind]">
                      <el-radio  v-for="options in rubric.options" :key="options.rubOpId"  :label="options.rubOpId">{{options.rubOpName}}</el-radio>
                        </el-radio-group>
                          <!--<el-radio v-model="options.rubOpScore" v-for="options in rubric.options" :key="options.rubOpId" border size="medium">{{options.rubOpName}}</el-radio> -->
                          <el-divider></el-divider>
                      </div>
                  </el-tab-pane>
            </el-tabs>
          </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="up()" :disabled = "dis">下一页</el-button>
          <el-button type="primary" @click="sub()" :disabled="subBtn">提交测评</el-button>
        </div>
      </el-dialog>
      <el-dialog title="查看心理测评详情" :visible.sync="dialogVisible" width="75%">
          <div>
            <el-col>
              <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="姓名">
                  <el-input v-model="conName" placeholder="姓名" readonly="true"></el-input>
                </el-form-item>
              </el-form>
              </el-col>
              <el-col>
              <el-form :inline="true" class="demo-form-inline">
                  <el-form-item label="会员id" v-show="false">
                    <el-input v-model="conId" placeholder="会员id" style="width:60px"></el-input>
                  </el-form-item>
                </el-form>
            </el-col>
          </div>
          <div style="width:80%;display:inline-block;text-align:left">
            <el-tabs v-model="actName" type="card" @tab-click="handle">
                  <el-tab-pane v-for="rub in rubTypes" :key="rub.tid" :label="rub.tname" :name="rub.tid">
                    <div v-for="(rubricOptions,ind) in RubricOptions" :key="rubricOptions.rubId">
                      <span>{{ind+1+'. '+rubricOptions.rubName}}</span>
                      <span>:     </span>
                      <span style="color: red">{{rubricOptions.rubricOption == null ? '未作答' : rubricOptions.rubricOption.rubOpName}}</span>
                      <el-divider></el-divider>
                    </div>
                  </el-tab-pane>
            </el-tabs>
          </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible=false">取 消</el-button>
        </div>
      </el-dialog>
        </div>
</template>

<script>
export default {
  name: 'mind',
  data () {
    return {
      dialogVisible: false,
      dialogFormVisible: false,
      tableData: [],
      currentPage: 1, // 当前页
      pageSize: 5,
      total: 0,
      mindTestName: '',
      rubTypes: [
        {tid: '10', tname: '躯体化'},
        {tid: '11', tname: '强迫症'},
        {tid: '12', tname: '人际关系敏感'},
        {tid: '13', tname: '忧郁'},
        {tid: '14', tname: '焦虑'},
        {tid: '15', tname: '敌对'},
        {tid: '16', tname: '恐怖'},
        {tid: '17', tname: '偏执'},
        {tid: '18', tname: '精神病性'}
      ],
      memName: '',
      memIdentity: '',
      memAge: '',
      memGender: '',
      memId: '',
      activeName: '10',
      Rubric: [],
      inde: [],
      test: [],
      userid: [],
      rubId: [],
      conName: '',
      conId: 0,
      actName: '10',
      RubricOptions: [],
      dis: true,
      jy: false,
      subBtn: true
    }
  },
  methods: {
    initBookData () {
      this.$axios.get(`/api/LljMindTestServlet?pageNum=${this.currentPage}&pageSize=${this.pageSize}&mindTestName=${this.mindTestName}`).then(result => {
        this.tableData = result.data.rows
        this.total = result.data.total
      })
    },
    handleSizeChange (value) { // value是在页大小下拉框选择的值
      this.pageSize = value
      this.initBookData()
    },
    handleCurrentChange (value) { // value是当前页码
      this.currentPage = value
      this.initBookData()
    },
    search () {
      this.currentPage = 1
      this.initBookData()
    },
    query () {
      this.$axios.get(`/api/lljconTestServilet/by?memName=${this.memName}&memIdentity=${this.memIdentity}`).then(result => {
        this.memAge = result.data.memAge
        this.memGender = result.data.memGender
        this.memId = result.data.memId
        if (result.data === null || result.data === 'null' || result.data === '') {
          this.$message({
            type: 'error',
            message: '该会员不存在，请确认信息后重新查询'
          })
          this.dis = true
        } else {
          this.$message({
            type: 'success',
            message: '查询成功！可以开始答题'
          })
          this.dis = false
        }
      })
    },
    handleClick () {
      this.$axios.get(`/api/LljMindTestServlet/selectRubric?rubType=${this.activeName}`).then(result => {
        this.Rubric = result.data
        console.log(this.Rubric)
        this.inde = result.data
        for (let i = 0; i < this.Rubric.length; i++) {
          this.inde[i].rubOpId = 0
          this.test.push(0)
        }
      })
    },
    up () {
      if (this.memId === '') {
        this.dis = true
      } else {
        this.jy = true
        this.activeName = parseInt(this.activeName) + 1
        this.activeName = JSON.stringify(this.activeName)
        this.handleClick()
        if (this.activeName === '18') {
          this.dis = true
        } else {
          this.dis = false
          this.subBtn = true
        }
        for (let i = 0; i < this.Rubric.length; i++) {
          this.rubId.push(this.Rubric[i].rubId)
        }
        this.test.forEach((e, i) => {
          this.userid.push(e)
        })
        let arr = []
        for (let i = 0; i < this.rubId.length; i++) {
          let rub = {
            rubId: 0,
            rubOpId: 0
          }
          arr.push(rub)
          arr[i].rubId = this.rubId[i]
          arr[i].rubOpId = this.userid[i]
        }
        this.$axios.post(`/api/LljMindTestServlet/add?memId=${this.memId}`, arr).then(result => {
        })
        this.rubId = []
        this.userid = []
        this.test = []
      }
    },
    sub () {
      if (this.memId !== '') {
        const loading = this.$loading({
          lock: true,
          text: '正在提交测评，请稍后。请勿关闭，以免发生错误。',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.5)'
        })
        for (let i = 0; i < this.Rubric.length; i++) {
          this.rubId.push(this.Rubric[i].rubId)
        }
        this.test.forEach((e, i) => {
          this.userid.push(e)
        })
        let arr = []
        for (let i = 0; i < this.rubId.length; i++) {
          let rub = {
            rubId: 0,
            rubOpId: 0
          }
          arr.push(rub)
          arr[i].rubId = this.rubId[i]
          arr[i].rubOpId = this.userid[i]
        }
        console.log(arr)
        this.$axios.post(`/api/LljMindTestServlet/add?memId=${this.memId}`, arr).then(result => {
          console.log(this.memName)
          this.$axios.post(`/api/LljMindTestServlet?mindTestName=${this.memName}&memId=${this.memId}`).then(result => {
            this.initBookData()
            loading.close()
            this.memName = ''
            this.memIdentity = ''
            this.memAge = ''
            this.memGender = ''
            this.memId = ''
            this.test = []
          }).catch(er => {
            loading.close()
            this.$message({
              type: 'error',
              message: '提交测评失败，请稍后再试！'
            })
          })
        })
        this.dis = false
        this.jy = false
        this.subBtn = true
        this.dialogFormVisible = false
        this.rubId = []
        this.userid = []
        this.activeName = '10'
      } else {
        alert('请输入姓名和身份证并查询')
      }
    },
    querycon (member) {
      this.dialogVisible = true
      this.conName = member.mindTestName
      this.conId = member.memId
      console.log(member.memId)
      this.$axios.get(`/api/lljconTestServilet/query?quesType=${this.actName}&memId=${member.memId}`).then(result => {
        this.RubricOptions = result.data
      })
    },
    handle () {
      this.$axios.get(`/api/lljconTestServilet/query?quesType=${this.actName}&memId=${this.conId}`).then(result => {
        this.RubricOptions = result.data
      })
    }
  },
  created () {
    this.initBookData()
    this.handleClick()
  }
}
</script>

<style>
</style>
